<template>
  <div class="systemInterface">
    <el-card shadow="hover">
      <div class="searchBox">
        <div class="one">
          <el-input placeholder="请输入名称" v-model="name">
            <template slot="prepend">名称</template>
          </el-input>
          <el-button class="btn">查找搜索</el-button>
        </div>
        <div class="itemBox">
          <el-button @click="addConfigurationBtn">添加</el-button>
        </div>
      </div>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="名称"> </el-table-column>
        <el-table-column prop="name" label="key"> </el-table-column>
        <el-table-column prop="name" label="value"> </el-table-column>
        <el-table-column prop="address" label="备注"> </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>

    <!-- 编辑/添加弹框 -->
    <el-dialog
      :title="interfaceConfiguration"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div>
        <p>
          <span>名称</span>
          <el-input v-model="input" placeholder="请输入名称"></el-input>
        </p>
        <p>
          <span>key</span>
          <el-input v-model="input" placeholder="请输入key"></el-input>
        </p>
        <p>
          <span>值</span>
          <el-input v-model="input" placeholder="请输入值"></el-input>
        </p>
        <p>
          <span>备注</span>
          <el-input v-model="input" placeholder="请输入备注"></el-input>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页

export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      tableData: [
        {
          id: "1",
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数

      input: "",

      interfaceConfiguration: "添加接口配置",
      dialogVisible: false,
    };
  },
  methods: {
    //编辑
    handleEdit(row) {
      console.log(row);
      this.interfaceConfiguration = "编辑接口配置";
      this.dialogVisible = true;
    },
    //添加
    addConfigurationBtn() {
      this.interfaceConfiguration = "添加接口配置";
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="less" scoped>
.systemInterface {
  margin: 30px;
  height: 100%;
  .searchBox {
    display: flex;
    margin-bottom: 20px;
    .one {
      display: flex;
    }
    .itemBox {
      display: flex;
      justify-content: flex-end;
      flex: 1;
      .el-button {
        height: 40px;
      }
    }
  }
  .el-dialog {
    div {
      p {
        display: flex;
        span {
          width: 40px;
          line-height: 40px;
        }
      }
    }
  }
}
</style>